<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input placeholder="请输入用户名" v-model="searchParam.SEARCH_LIKE_user_name" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-input placeholder="请输入手机号" v-model="searchParam.SEARCH_LIKE_mobile" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-select v-model="searchParam.SEARCH_EQ_apply_type" placeholder="请选择申请类型" @change="handleFilter"  style="width: 200px" class="filter-item">
                <el-option
                    v-for="item in typeData"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 搜索</el-button>
            <el-button class="filter-item" type="default" icon="el-icon-search" @click="searchReset"> 重置</el-button>
            </el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table v-loading="listLoading" :key="tableKey" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column v-for="column in columns" :key="column.prop"
                             :prop="column.prop"
                             :label="column.label"
                             :width="column.width"
                             :align="column.align?column.align:'center'"
                             :min-width="column.minWidth"
                             :sortable="column.sortable"
                             :fixed="column.fixed"
                             :type="column.type" :formatter="column.formatter">
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img v-if="column.imgFlag===true"
                         :src=" scope.row[column.prop].indexOf('http://') >-1 ?  scope.row[column.prop] : ( CMBASE.baseFileContext + scope.row[column.prop] ) "
                         width="60" height="60" class="img" alt=""/>
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled/>
                    <!-- 行内显示tag标签 -->
                    <span v-else-if="column.tagFlag==true">
                        <span v-for="item in column.tagFormatter" :key="item.value">
                            <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{ item.text }}</el-tag>
                        </span>
                    </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>
                    <!--默认显示文本-->
                    <span v-else>{{ scope.row[column.prop] }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="240" class-name="small-padding">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row,1)"> 查看</el-button>
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row,2)"> 审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum"
                    :limit.sync="pageRequest.pageSize" @pagination="getList"/>

        <!--新增编辑界面-->
        <el-dialog :title="operation?'查看':'审核'" width="45%" top="5vh" :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false">
            <el-form ref="dataForm" :model="dataForm"  disabled label-width="140px" style="width: 80%">
                <el-row v-if="dataForm.applyType == 1">
                    <el-form-item label="个人入驻" >
                    </el-form-item>
                    <el-form-item label="证件姓名" prop="name">
                        <el-input v-model="dataForm.name" auto-complete="off" />
                    </el-form-item>
                </el-row>
                <el-row v-if="dataForm.applyType == 2">
                    <el-form-item label="企业入驻">
                    </el-form-item>
                    <el-form-item label="法人姓名" prop="name">
                        <el-input v-model="dataForm.name" auto-complete="off"/>
                    </el-form-item>
                </el-row>
                <el-form-item label="身份证号" prop="cardNumber">
                    <el-input v-model="dataForm.cardNumber" auto-complete="off" />
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="dataForm.mobile" auto-complete="off" />
                </el-form-item>
                <el-row v-if="dataForm.applyType == 1">
                    <el-form-item label="身份证证件照" >
                    </el-form-item>
<!--                    <el-form-item label="证件照正面" prop="certPositive">-->
<!--                        <cm-upload v-model="dataForm.certPositive"></cm-upload>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="证件照反面" prop="certReverse">-->
<!--                        <cm-upload v-model="dataForm.certReverse"></cm-upload>-->
<!--                    </el-form-item>-->
                    <el-form-item label="证件照正面" prop="certPositive">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="certPositiveUrl"
                            :preview-src-list="certPositiveSrcList"></el-image>
                    </el-form-item>
                    <el-form-item label="证件照反面" prop="certReverse">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="certReverseUrl"
                            :preview-src-list="certReverseSrcList"></el-image>
                    </el-form-item>

                </el-row>
                <el-row v-if="dataForm.applyType == 2">
                    <el-form-item label="营业执照" >
                    </el-form-item>
                    <el-form-item label="营业执照正面" prop="busPositive">
                        <el-image class="showScreenImg"
                            style="width: 100px; height: 100px"
                            :src="busPositiveUrl"
                            :preview-src-list="busPositiveSrcList"
                            :z-index="100"></el-image>
                    </el-form-item>
                </el-row>
                <el-form-item label="审核状态" prop="state">
                    <el-select v-model="dataForm.checkState" placeholder="审核状态">
                        <el-option label="待审核" :value="0"></el-option>
                        <el-option label="通过" :value="1"></el-option>
                        <el-option label="拒绝" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-row v-if="dataForm.checkState == 2">
                    <el-form-item label="拒绝理由" prop="refuseReason">
                        <el-input v-model="dataForm.refuseReason" auto-complete="off" />
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="this.dataFormFlag == 2 && (dataForm.checkState===0 || dataForm.checkState===1)"  :loading="editLoading" size="mini"
                           type="primary" @click.native="handleApply(dataForm.id,dataForm.refuseReason)">拒绝
                </el-button>
                <el-button v-if="this.dataFormFlag == 2 && (dataForm.checkState===0 || dataForm.checkState===2)"  :loading="editLoading" size="mini"
                           type="primary" @click.native="saveFormData(dataForm.id)">通过
                </el-button>
            </div>
        </el-dialog>
        <el-dialog :title="checkName" :visible.sync="getCheckVisible">
            <el-form ref="checkForm" :model="checkForm">
                <el-form-item label="拒绝理由" prop="refuseReason">
                    <el-input v-model="checkForm.refuseReason" autocomplete="off" placeholder="请输入拒绝理由"
                              style="width: 80%" type="textarea"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click.native="handleSubmit()">提交</el-button>
            </div>
        </el-dialog>


    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 分页栏信息
import {
    getViewThirdApplyList,
    deleteThirdApply,
    applyCheck, adminWithdrawCheck,
} from '@/api/modules/appUser'
import CmUpload from '@/components/Upload' // 上传图片组件引入
import table2excel from 'js-table2excel'
import {deleteMenu} from "@/api/modules/cm-system";

export default {
    name: 'appUser',
    components: {
        Pagination,
        CmUpload,
    },
    directives: {},
    filters: {},
    data() {
        return {
            tableKey: 0,
            tableList: [],//表格数据源
            tableTotal: 0,//表格总条数数据
            listLoading: true,
            typeData: [
                {
                    name: "个人",
                    value: "1"
                },
                {
                    name: "企业",
                    value: "2"
                },
            ],
            pageRequest: {pageNum: 1, pageSize: 10,},
            searchParam: {},
            dialogFormVisible: false,//默认不显示弹出框
            operation: true, // true:新增, false:编辑
            editLoading: false,//保存表单时loading框
            columns: [
                {prop: 'userName', label: '用户名', sortable: false},
                {prop: 'mobile', label: '手机号', sortable: false},
                {prop: 'ct', label: '创建时间', sortable: false},
                {
                    prop: 'checkState', label: '审核状态', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '待审核', value: 0, type: 'warn'},
                        {text: '通过', value: 1, type: 'success'},
                        {text: '未通过', value: 2, type: 'danger'},
                    ]
                },
                {prop: 'refuseReason', label: '拒绝理由', sortable: false},
                {
                    prop: 'applyType', label: '申请类型', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '个人', value: 1, type: 'success'},
                        {text: '企业', value: 2, type: 'warn'},
                    ]
                },
                // {prop: 'registerTime',  label: '注册时间',  sortable:false  },
            ],
            fileList: [],
            // 新增编辑界面数据
            dataForm: {},
            //营业执照正面
            busPositiveUrl:'',
            busPositiveSrcList:[],
            //身份证正面  certPositive
            certPositiveUrl:'',
            certPositiveSrcList:[],
            //身份证反面  certReverse
            certReverseUrl:'',
            certReverseSrcList:[],
            dataFormFlag: 1,
            // 审核备注数据
            getCheckVisible: false,//默认不显示弹出框
            thirdApplyId: '',//表格总条数数据
            refuseReason: '',//表格总条数数据
            checkForm: {
                refuseReason:''
            },
            checkName: '拒绝理由',
        }
    },
    methods: {
        //获取表格数据
        getList() {
            this.listLoading = true
            //【API请求】----获取表格列表数据
            getViewThirdApplyList(this.pageRequest).then(response => {
                response = response.result
                this.tableList = response.list
                this.tableTotal = response.total
                this.listLoading = false;
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        //表格数据筛选
        handleFilter() {
            this.pageRequest.searchParam = this.searchParam
            this.getList()
        },
        //【按钮点击】--- 弹出编辑表单
        handleUpdate(row,flag) {
            //进来之前先置空
            this.busPositiveUrl = ''
            this.busPositiveSrcList = []
            this.certPositiveUrl = ''
            this.certPositiveSrcList = []
            this.certReverseUrl = ''
            this.certReverseSrcList = []
            if(flag == 1){//查看
                this.operation = true;
            }else{//审核
                this.operation = false;
            }
            this.dataForm.deviceModel = this.dataForm.deviceModel + ""
            this.dataForm = Object.assign({}, row)
            //营业执照正面
            let busPositiveValue = this.dataForm.busPositive
            this.busPositiveUrl = busPositiveValue.indexOf('http://')>-1 ? busPositiveValue :    this.CMBASE.baseFileContext+busPositiveValue
            this.busPositiveSrcList.push(this.busPositiveUrl)
            //身份证正面  certPositive
            let certPositiveValue = this.dataForm.certPositive
            this.certPositiveUrl = certPositiveValue.indexOf('http://')>-1 ? certPositiveValue :    this.CMBASE.baseFileContext+certPositiveValue
            this.certPositiveSrcList.push(this.certPositiveUrl)
            //身份证反面  certReverse
            let certReverseValue = this.dataForm.certReverse
            this.certReverseUrl = certReverseValue.indexOf('http://')>-1 ? certReverseValue :    this.CMBASE.baseFileContext+certReverseValue
            this.certReverseSrcList.push(this.certReverseUrl)

            this.dataFormFlag = flag
            //显示编辑菜单
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
                this.editLoading = false;
            })
        },
        //点击通过
        saveFormData(id) {
            this.thirdApplyId = id
            const checkState = 1
            const params = {
                state: checkState,
                applyId: id,
                refuseReason: "",
            }
            applyCheck(params).then(response => {
                this.dialogFormVisible = false
                this.getList()// 重新获取表格数据
                this.$notify({title: '成功', message: '已审核通过', type: 'success', duration: 2000})
            }).catch(() => {
                this.dialogFormVisible = false
                this.getList()
            })
        },
        //点击拒绝， 输入拒绝原因
        handleApply(id,refuseReason) {
            this.thirdApplyId = id
            this.getCheckVisible = true
            this.dialogFormVisible = true
            this.checkForm.refuseReason = refuseReason
        },
        //点击提交，处理拒绝申请
        handleSubmit() {
            const applyState = 2
            const params = {
                state: applyState,
                applyId: this.thirdApplyId,
                refuseReason: this.checkForm.refuseReason
            }
            // 【API请求】----文章审核 拒绝
            applyCheck(params).then(response => {
                this.getCheckVisible = false
                this.dialogFormVisible = false
                this.getList()// 重新获取表格数据
                this.$notify({title: '成功', message: '已审核拒绝', type: 'success', duration: 2000})
                this.initCheckForm()// 重置表单数据
            }).catch(() => {
                this.getCheckVisible = false
                this.getList()
            })
        },
        //【按钮点击】---删除行
        handleDelete(row) {
            this.$confirm('确认删除该记录吗？', '提示', {}).then(() => {
                //【API请求】---- 删除数据
                deleteThirdApply(row.id).then(() => {
                    this.$message({message: '操作成功', type: 'success'})
                    this.getList();
                })
            }).catch(() => {
                this.$message({message: '操作失败', type: 'error'})
            });
        },
        // 重置按钮
        searchReset() {
            this.searchParam = {}
            this.pageRequest = {pageNum: 1, pageSize: 10}
            this.getList()
        },
        //初始化表单数据，重新渲染
        initDataForm() {
            this.dataForm = {
                id: '',
                checkState: '',
                refuseReason: '',
                applyType: '',
                mobile: '',
                userName: '',
                name: '',
                cardNumber: '',
                certType: '',
                certPositive: '',
                certReverse: '',
                busPositive: '',
                busReverse: '',
                busNumber: '',
            };
        },
        //初始化表单数据，重新渲染
        initCheckForm()
        {
            this.checkForm = {
                refuseReason: '',
            };
        },
        //关闭表单弹出框
        closeDialog() {
            this.$refs['dataForm'].resetFields();
            this.dialogFormVisible = false
        },

    },
    created() {
        this.getList();
    },
}
</script>
<style>
/*.showScreenImg { !**预览图片icon *!*/
/*    position: relative;*/
/*    left: -2px;*/
/*    width: 18px;*/
/*    height: 18px;*/
/*    z-index: 999;*/
/*    padding-right: 96px;*/
/*}*/
/*.showScreenImg:after{*/
/*    position: absolute;*/
/*    display: inline-block;*/
/*    left: 28px;*/
/*    top: -1px;*/
/*    content: '整个页面效果';*/
/*    width: 88px;*/
/*    height: 18px;*/
/*}*/
/*.showScreenImg .el-image__inner.el-image__preview { !**增加预览点击事件范围 *!*/
/*    position: relative;*/
/*    z-index: 9999;*/
/*    padding-right: 96px;*/
/*    width: 18px;*/
/*    height: 18px;*/
/*}*/
</style>

